<?php session_start() ?>
<?php
    if(isset($_SESSION['ses_name'])){
        echo $_SESSION['ses_name'];
    }
?>

<html>
    <head>
        <title>comment</title>
        <link type="text/css" rel="stylesheet" href="style.css"  />
        <link rel="stylesheet" type="text/css" href="<?php $_SERVER['DOCUMENT_ROOT']?>/bootstrap.min.css" />
        <meta charset="utf-8"  />
        <script src="<?php $_SERVER['DOCUMENT_ROOT']?>/jquery.js"></script>
        <script>
            $(function(){
                
                $('#log-ok').click(function(){
                    var id = $('#id').val().toString();
                    var pass = $('#pass').val().toString();
                    var leng_id = id.length;
                    var leng_pass = pass.length;
                    if(leng_id >0 && leng_id <20 && leng_pass >0 && leng_pass < 20 ){
                        $.ajax({
                        url:'login.php',
                        type:'POST',
                        data:{
                            id:id,
                            pass:pass
                        },
                        success:function(data){
                            var data = $.parseJSON(data);
                            if(data.status == 1){
                                $('#header').css({
                                    'display':'block'
                                })
                                $('#hello').css({
                                    'display':'block'
                                })
                                $('#name').text(data.use_name);
                                $('#opacity').css({
                                    'opacity':0,
                                    'display':'none'
                                })
                                $('#login').css({
                                    'opacity':0,
                                    'display':'none'
                                })
                                $('#hea-login').css({
                                    'display':'none'
                                })
                            }      
                        }
                        
                    })
                    }
                    
                })//end log-ok
                $('#hea-login').click(function(){
                    $('#header').css({
                        'display':'none'
                    })
                    $('#opacity').css({
                       'opacity': 0.7 ,
                       'display': 'block' 
                    });
                    $('#login').css({
                        'display':'block',
                        'opacity':1
                    });
                    $('#login').animate({
                        top:'170px'
                    },1000)
                })
                //var end = 255;
//                var lng = 0 ;
//                $('#end-text').text(end);
//                $('#text').keyup(function(){
//                    if(end >0){
//                        
//                        var content = $('#text').val();
//                        content = content.toString();
//                        lng = content.length;
//                        alert(lng);
//                        end = end - lng;
//                        $('#end-text').text(end);    
//                    } else{
//                        alert('ban da nhap qua so ky tu');
//                    }
//                    
//                })
                var i = 0;
                $('#send').click(function(){
                    
                    //$('#opacity').css({
//                       'opacity': 0.8 ,
//                       'display': 'block' 
//                    });
//                    $('#login').css({
//                        'display':'block',
//                        'opacity':1
//                    });
//                    $('#login').animate({
//                        top:'250px'
//                    },1000)
//                    end = 255;
//                    $('#end-text').text(end);
                    var str =  $('#text').val();
//                    console.log(str);
//                    $('#text').val('');
                    var id = $('#name').text();
                    
                    $.ajax({
                        url:'comment.php',
                        type: 'POST',
                        data:{
                            comm : str,
                            id:id
                        },
                        success:function(data){
                            var data = $.parseJSON(data);
                            i++;         
                            $('#show').prepend("<div class = 'show-chil' id = '"+i+"'></div> <div class = 'clear space'></div>");
                            $('div #'+i+'').append("<img class = 'avatar' src = '#' />");
                            $('div #'+i+'').append("<span class = 'name com'>"+data.name+" : </span>");
                            $('div #'+i+'').append("<span class = 'comment com' >"+data.comm+"</span>");
                            $('div #'+i+'').append("</br>");
                            $('div #'+i+'').append("<span class='time' >Lúc</span>");
                            $('div #'+i+'').append("<span class='hour time'>13</span>");
                            $('div #'+i+'').append("<span class='time'>h</span>");
                            $('div #'+i+'').append("<span class='hour time'>13</span>");
                            $('div #'+i+'').append("<span class='minute time'>20</span>");
                            $('div #'+i+'').append("<span  class='date time'>19</span>");
                            $('div #'+i+'').append("<span class='1 time'>/</span>");
                            $('div #'+i+'').append("<span class='month time'>1</span>");
                            $('div #'+i+'').append("<span class='1 time'>/</span>");
                            $('div #'+i+'').append("<span class='year time'>2003</span>");
                        }
                        
                    })
                })
                
                
            })
        
        </script>
        
    </head>
    
    <body>
        <div id="opacity"></div>
        <div id="login">
            <div id="log-nav">
                <input type="text" id="id"  />
                <input type="password" id="pass" />
                <div class="clear"></div>
                <input type="button" value="Login" class="btn" id="log-ok" />
            </div>
        </div>
        <div id="wrap">
            <div id="nav">
                <div id="header">
                    <span id="hello">Xin chào bạn :</span>
                    <span id="name"></span>
                    <input type="button" value="Log in" id="hea-login" class="btn" />
                    <input type="button" value="Log out" id="hea-logout" class="btn" />
                </div>
                <div class="clear"></div>
                
                <div id="input">
                    <textarea id="text">
                    </textarea>
                    <div class="clear space-top"></div>
                    <div style="font-size: 12px; font-family: tahoma; float: left;">Số ký tự còn lại : </div>
                    <span id="end-text"></span>
                    <img id="send" src="images/send_button.png" />
                    <div class="clear"></div>
                </div>
                <div id="show">
                    
                    <div class="show-chil">
                        <img class="avatar" src="#" />
                        <span class="name com" >Nguyen duc dinh :</span>
                        <span class="comment com">Hello world</span>
                        <br />
                        <span class="time" >Lúc</span>
                        <span class="hour time">13</span>
                        <span class="time">h</span>
                        <span class="minute time">20</span>
                        <span class="time">,ngày</span>
                        <span  class="date time">19</span>
                        <span class="1 time">/</span>
                        <span class="month time">1</span>
                        <span class="1 time">/</span>
                        <span class="year time">2003</span>
                    </div>
                    <div class="clear space"></div>
                </div>
            </div>
        </div>
    </body>
</html>